//接收信息
let url = null;
let number = 0;
let lastNumber = null;
let lastUrl = null;
let pageNmber = 2
window.addEventListener('message', function(event) {  
    console.log('Received message: ', event.data);
    url = event.data.url
    number = event.data.number
    if(lastNumber === number && lastUrl === url){

    }else{ 
        const pages = document.querySelector('.iot_pages')
        const pageLength = pages.children.length;
        for(let i = 1; i < pageLength; i++){
            let page = pages.querySelector('.iot_page'+(1+i))
            console.log(page)
            pages.removeChild(page); 
        } 
        pageNmber = 2
        document.documentElement.scrollTo(0,0)
        AxiosSending(url,number);
        lastNumber = number
        lastUrl = url
    }
});
sendAxios('https://pcapi-xiaotuxian-front.itheima.net/hot/preference').then(data=>{
    console.log(data)})
function AxiosSending(url,number){
    sendAxios(`https://pcapi-xiaotuxian-front.itheima.net${url}`).then(data=>{
        console.log(data)
        const items = data.result.subTypes[number].goodsItems.items;
        const couple = document.querySelectorAll('.iot_page1 .iot_couple');
        for(let i = 0 ; i < 5 ; i++){
            let img = couple[i].querySelectorAll('img')
            let a = couple[i].querySelectorAll('a')
            for(let j = 0 ; j < 2 ; j++){
            img[j].src = items[2*i+j].picture;
            img[j].id = items[2*i+j].id;
            a[j].addEventListener('click', function(event) { 
                const id = this.querySelector('img').id;
                event.preventDefault(); 
                console.log(id);
                sendMessage(id,0);
            }); 
           } 
        }
        for(let i = 0 ; i < 5 ; i++){
            let p = couple[i].querySelectorAll('p')
            for(let j = 0 ; j < 4 ; j++){
            if (j === 0){
                p[j].innerHTML = items[2*i].name;
            }else if(j === 1){
                p[j].innerHTML = '￥'+items[2*i].price;
            }else if(j === 2){
                p[j].innerHTML = items[2*i+1].name;
            }else if(j === 3){
                p[j].innerHTML = '￥'+items[2*i+1].price;
            }
           } 
        }
    })
}

// 加载更多内容
const screenHeight = this.screen.availHeight;
const screenWidth = this.screen.availWidth;
document.addEventListener('DOMContentLoaded', function() { 
    let axiosData = null;
    const marginTop = 3.72*window.screen.availWidth/10;
    window.addEventListener("scroll", function(){
        if(document.documentElement.scrollTop > document.body.scrollHeight - screenHeight - marginTop){
            axiosData = sendingAxios(`https://pcapi-xiaotuxian-front.itheima.net${url}?page=${pageNmber}&pageSize=10`);
            if (axiosData){
                axiosData.then(data=>{
                    const items = data.result.subTypes[number].goodsItems.items;
                    const page = document.createElement('div');
                    page.className = 'iot_page'+pageNmber;
                    page.innerHTML = '<div class="iot_couple"><a href=""><img src="" alt=""><p></p><p></p></a><a href=""><img src="" alt=""><p></p><p></p></a></div><div class="iot_couple"><a href=""><img src="" alt=""><p></p><p></p></a><a href=""><img src="" alt=""><p></p><p></p></a></div><div class="iot_couple"><a href=""><img src="" alt=""><p></p><p></p></a><a href=""><img src="" alt=""><p></p><p></p></a></div><div class="iot_couple"><a href=""><img src="" alt=""><p></p><p></p></a><a href=""><img src="" alt=""><p></p><p></p></a></div><div class="iot_couple"><a href=""><img src="" alt=""><p></p><p></p></a><a href=""><img src="" alt=""><p></p><p></p></a></div>'
                    const pages = document.querySelector('.iot_pages')
                    pages.appendChild(page);
                    const couple = page.querySelectorAll('.iot_couple');
                    for(let i = 0 ; i < 5 ; i++){
                        let img = couple[i].querySelectorAll('img')
                        let a = couple[i].querySelectorAll('a')
                        for(let j = 0 ; j < 2 ; j++){
                        img[j].src = items[2*i+j].picture;
                        img[j].id = items[2*i+j].id;
                        a[j].addEventListener('click', function(event) { 
                            const id = this.querySelector('img').id;
                            event.preventDefault(); 
                            console.log(id);
                            sendMessage(id,0);
                        }); 
                       } 
                    }
                    for(let i = 0 ; i < 5 ; i++){
                        let p = couple[i].querySelectorAll('p')
                        for(let j = 0 ; j < 4 ; j++){
                        if (j === 0){
                            p[j].innerHTML = items[2*i].name;
                        }else if(j === 1){
                            p[j].innerHTML = '￥'+items[2*i].price;
                        }else if(j === 2){
                            p[j].innerHTML = items[2*i+1].name;
                        }else if(j === 3){
                            p[j].innerHTML = '￥'+items[2*i+1].price;
                        }
                       } 
                    }
                    pageNmber++;
                })
            }
            
        }
    })
}); 